<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="支付类型" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="请选择支付类型" clearable size="small" @change="handleQuery">
          <el-option
            v-for="dict in payTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="购买类型" prop="buyType">
        <el-select v-model="queryParams.buyType" placeholder="请选择购买类型" size="small" @change="handleQuery">
          <el-option
            v-for="dict in buyTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
            :disabled="dict.dictValue == 'PY'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="充值状态" prop="rechargeState"
                    v-if="queryParams.buyType=='PB'||queryParams.buyType=='PC'||queryParams.buyType=='OIL'||queryParams.buyType=='WKY'">
        <el-select v-model="queryParams.rechargeState" placeholder="请选择充值状态" clearable size="small"
                   @change="handleQuery">
          <el-option
            v-for="dict in rechargeState"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否快充" prop="fast" v-if="queryParams.buyType=='PB'">
        <el-select v-model="queryParams.fast" placeholder="请选择充值方式" clearable size="small" @change="handleQuery">
          <el-option
            v-for="dict in fastState"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="充值号码" prop="phone" v-if="queryParams.buyType=='PB'">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入充值号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="户号" prop="phone" v-if="queryParams.buyType=='PC'">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入充值户号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="充值类型" prop="thirdColumnName" v-if="queryParams.buyType=='WKY'">
        <el-input
          v-model="queryParams.extraParams.thirdColumnName"
          placeholder="请输入充值类型"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="油卡姓名" prop="oilcardUserName" v-if="queryParams.buyType=='OIL'">
        <el-input
          v-model="queryParams.extraParams.oilcardUserName"
          placeholder="请输入油卡姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="油卡类型" prop="oilcardTypeId" v-if="queryParams.buyType=='OIL'">
        <el-select v-model="queryParams.extraParams.oilcardTypeId" placeholder="请选择购买类型" size="small"
                   @change="handleQuery">
          <el-option
            v-for="dict in oilcardTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
            :disabled="dict.dictValue == 'PY'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="油卡编号" prop="oilcardNo" v-if="queryParams.buyType=='OIL'">
        <el-input
          v-model="queryParams.extraParams.oilcardNo"
          placeholder="请输入油卡编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证号" prop="identityNo" v-if="queryParams.buyType=='OIL'">
        <el-input
          v-model="queryParams.extraParams.identityNo"
          placeholder="请输入身份证号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单号" prop="orderNum">
        <el-input
          v-model="queryParams.orderNum"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付时间" label-width="110px">
        <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" :start-placeholder="$t('system.user.startDate')"
                        :end-placeholder="$t('system.user.endDate')"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['app:payRecord:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="tables" v-loading="loading" :data="payRecordList" @selection-change="handleSelectionChange"
              :default-sort="defaultSort" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" width="50" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column key="1" label="支付类型" sortable="custom" align="center" prop="payType" :formatter="payTypeFormat"/>
      <el-table-column key="2" label="支付金额" sortable="custom" align="center" prop="payMoney" width="100"/>
      <el-table-column key="3" label="充值号码" sortable="custom" align="center" prop="phone" width="250"
                       v-if="queryParams.buyType=='PB'"/>
      <el-table-column key="4" label="是否快充" align="center" prop="fast" v-if="queryParams.buyType=='PB'"
                       :formatter="fastFormat"/>
      <el-table-column key="5" label="城市" sortable="custom" align="center" prop="areaName"
                       v-if="queryParams.buyType=='PC'"/>
      <el-table-column key="6" label="户号" sortable="custom" align="center" prop="phone"
                       v-if="queryParams.buyType=='PC'"/>
      <el-table-column key="7" label="用户名" sortable="custom" align="center" prop="userName"/>
      <el-table-column key="8" label="充值面额" sortable="custom" align="center" prop="money"
                       v-if="queryParams.buyType=='OIL'"/>

      <el-table-column key="9" label="油卡类型" align="center" prop="oilcardTypeName" v-if="queryParams.buyType=='OIL'"/>
      <el-table-column key="10" label="油卡姓名" align="center" prop="oilcardUserName" v-if="queryParams.buyType=='OIL'"/>
      <el-table-column key="11" label="油卡编号" align="center" prop="oilcardNo" v-if="queryParams.buyType=='OIL'"/>
      <el-table-column key="12" label="身份证号" align="center" prop="identityNo" v-if="queryParams.buyType=='OIL'"/>

      <el-table-column key="21" label="充值类型" align="center" prop="thirdColumnName" v-if="queryParams.buyType=='WKY'"/>
      <el-table-column key="22" label="分类" align="center" prop="thirdColumnCategoryName" v-if="queryParams.buyType=='WKY'"/>
      <el-table-column key="23" label="产品名称" align="center" prop="productName" v-if="queryParams.buyType=='WKY'"/>

      <el-table-column key="96" label="购买类型" sortable="custom" align="center" prop="buyType"
                       :formatter="buyTypeFormat"/>
      <el-table-column key="97" label="商品类型" align="center" prop="productType" :formatter="productTypeFormat"
                       v-if="queryParams.buyType=='PC'"/>
      <el-table-column key="98" label="订单号" align="center" prop="orderNum"/>
      <el-table-column key="99" label="充值状态" align="center" prop="rechargeState"
                       v-if="queryParams.buyType=='PB'||queryParams.buyType=='PC'||queryParams.buyType=='OIL'||queryParams.buyType=='WKY'"
                       width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rechargeState==0">待充值</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.rechargeState==1">已充值</el-tag>
          <el-tag effect="dark" type="info" v-if="scope.row.rechargeState==2">已退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column key="100" label="支付时间" sortable="custom" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column key="20" label="操作" align="center" class-name="small-padding fixed-width"
                       v-if="queryParams.buyType=='PB'||queryParams.buyType=='PC'||queryParams.buyType=='OIL'||queryParams.buyType=='WKY'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-if="scope.row.rechargeState==0" icon="el-icon-edit"
                     @click="handleUpdateRechargeState(scope.row)">充值成功
          </el-button>
          <el-button size="mini" type="text" v-if="scope.row.rechargeState==0" icon="el-icon-edit"
                     @click="handleRefund(scope.row)">退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
  import { listPayRecord, getPayRecord, exportPayRecord, updateRechargeState, refund } from '@/api/app/payRecord'
  import { listUser } from '@/api/system/user'

  export default {
    name: 'PayRecord',
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // APP交易记录表格数据
        payRecordList: [],
        // 日期范围
        dateRange: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 支付类型字典
        payTypeOptions: [],
        //油卡类型
        oilcardTypeOptions: [],
        rechargeState: [{ value: 0, label: '待充值' }, { value: 1, label: '充值成功' }, { value: 2, label: '充值失败' }],
        fastState: [{ value: 0, label: '慢充' }, { value: 1, label: '快充' }],
        // 购买类型字典
        buyTypeOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          payType: null,
          userId: null,
          userName: null,
          buyType: 'PB',
          orderNum: null,
          phone: null,
          buyerUserId: null,
          status: null,
          callbackData: null,
          prepayId: null,
          transactionId: null,
          orderByColumn: 'createTime',
          isAsc: 'descending',
          timeEnd: null,
          oilcardTypeId: null,
          extraParams: {
            oilcardTypeId: '',
            identityNo: '',
            oilcardNo: '',
            oilcardUserName: '',
            thirdColumnName:''
          }
        },
        // 默认排序
        defaultSort: { prop: 'createTime', order: 'descending' },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    created() {
      this.getList()
      this.getDicts('app_pay_type').then(response => {
        this.payTypeOptions = response.data
      })
      this.getDicts('app_buy_type').then(response => {
        this.buyTypeOptions = response.data
      })
      this.getDicts('oilcard_type').then(response => {
        this.oilcardTypeOptions = response.data
      })
    },
    methods: {
      /** 查询APP交易记录列表 */
      getList() {
        this.loading = true
        let params = this.addDateRange(this.queryParams, this.dateRange)
        let extraParams = params.extraParams
        let params1 = params.params
        extraParams = Object.assign(extraParams, params1)
        params['params']=extraParams
        listPayRecord(params).then(
          (response) => {
            this.payRecordList = response.rows
            this.total = response.total
            this.loading = false
          }
        )
      },
      /** 排序触发事件 */
      handleSortChange(column, prop, order) {
        this.queryParams.orderByColumn = column.prop
        this.queryParams.isAsc = column.order
        this.getList()
      },
      // 支付类型字典翻译
      payTypeFormat(row, column) {
        return this.selectDictLabel(this.payTypeOptions, row.payType)
      },
      // 购买类型字典翻译
      buyTypeFormat(row, column) {
        return this.selectDictLabel(this.buyTypeOptions, row.buyType)
      },
      fastFormat(row, column) {
        if (row.fast == '1') {
          return '是'
        }
        if (row.fast == '0') {
          return '否'
        }
        return row.fast
      },
      // 商品类型字典翻译
      productTypeFormat(row, column) {
        if (row.productType == 4) {
          return '电费'
        }
        if (row.productType == 5) {
          return '水费'
        }
        if (row.productType == 6) {
          return '燃气费'
        }
        if (row.productType == 7) {
          return '油卡充值'
        }
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          recordId: null,
          payType: null,
          payMoney: null,
          userId: null,
          buyType: null,
          orderNum: null,
          phone: null,
          param: null,
          tradeNo: null,
          buyerUserId: null,
          status: '0',
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          callbackData: null,
          prepayId: null,
          transactionId: null,
          timeEnd: null,
          remark: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = []
        this.dateRange = []
        this.resetForm('queryForm')
        this.queryParams.extraParams={}
        this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.recordId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const recordId = row.recordId || this.ids
        getPayRecord(recordId).then(response => {
          this.form = response.data
          this.open = true
          this.title = '修改APP交易记录'
        })
      },
      handleUpdateRechargeState(row) {
        const recordId = row.recordId
        this.$confirm('是否确认充值成功?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return updateRechargeState(recordId, 1)
        }).then(() => {
          this.getList()
          this.msgSuccess('操作成功')
        })
      },
      handleRefund(row) {
        const recordId = row.recordId
        this.$confirm('是否确认退款?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return refund(recordId)
        }).then(() => {
          this.getList()
          this.msgSuccess('操作成功')
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams
        this.$confirm('是否确认导出所有APP交易记录数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return exportPayRecord(queryParams)
        }).then(response => {
          this.download(response.msg)
        })
      }
    }
  }
</script>
